<template>
	<view class="container">
		<!-- 顶部信息区域 -->
		<view class="header">
			<!-- 已登录状态 -->
			<view class="avatar-section" v-if="isLogin" @click="changeAvatar">
				<image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill">
				</image>
				<view class="info">
					<text class="desc">用户名：{{ userInfo.username || '未绑定' }}</text>
				</view>
				<image class="arrow" src="/static/images/arrow-right.png"></image>
			</view>

			<!-- 未登录状态 -->
			<view class="not-login" v-else>
				<button class="login-btn" @click="showLoginModal = true">登录/注册</button>
			</view>
		</view>

		<!-- 登录弹窗 -->
		<view v-if="showLoginModal" class="modal-mask">
			<view class="modal-content">
				<view class="modal-header">
					<text class="title">用户登录</text>
					<image class="close-icon" src="/static/images/close.png" @click="showLoginModal = false"></image>
				</view>
				<input class="input" v-model="form.username" placeholder="请输入账号" />
				<input class="input" v-model="form.password" placeholder="请输入密码" password />
				<button class="btn login" @click="handleLogin">登录</button>
				<button class="btn register" @click="handleRegister">注册</button>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="list-item" :class="{ disabled: !isLogin }" @click="requireLogin('openWallet')">
				<image src="/static/images/wallet.png" class="icon"></image>
				<text class="label">班级</text>
				<view>{{ userInfo.classnumber }}</view>
			</view>

			<view class="list-item" :class="{ disabled: !isLogin }" @click="requireLogin('openCollections')">
				<image src="/static/images/collections.png" class="icon"></image>
				<text class="label">课程</text>
				<text class="count">{{ coursecount }}</text>
				<image src="/static/images/arrow-right.png" class="arrow"></image>
			</view>

			<view class="list-item" :class="{ disabled: !isLogin }" @click="requireLogin('openCards')">
				<image src="/static/images/cards.png" class="icon"></image>
				<text class="label">作业详情</text>
				<image src="/static/images/arrow-right.png" class="arrow"></image>
			</view>

			<view class="list-item" :class="{ disabled: !isLogin }" @click="requireLogin('openSettings')">
				<image src="/static/images/settings.png" class="icon"></image>
				<text class="label">设置</text>
				<image src="/static/images/arrow-right.png" class="arrow"></image>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="bottom-actions" v-if="isLogin">
			<button class="action-btn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>


<script>
import {
	login,
	register
} from '../../../request/login'
import { changeuserinfo } from '../../../request/user'
import { getTeacherCourse } from '../../../request/teacherCourse'
export default {
	data() {
		return {
			isLogin: false,
			showLoginModal: false,
			userInfo: {},
			form: {
				username: '',
				password: ''
			},
			coursecount: 0
		}
	},
	onLoad() {
		this.checkLoginStatus()
		this.getCourseCount()
	},
	methods: {
		// 统一登录检查方法
		requireLogin(methodName) {
			if (!this.isLogin) {
				this.showLoginModal = true
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}
			if (this[methodName]) {
				this[methodName]()
			}
		},

		// 检查登录状态
		checkLoginStatus() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.isLogin = true
				this.userInfo = userInfo
			}
		},

		// 处理登录
		async handleLogin() {
			if (!this.form.username || !this.form.password) {
				uni.showToast({
					title: '请输入完整信息',
					icon: 'none'
				})
				return
			}

			try {
				const res = await login(this.form)
				this.isLogin = true
				uni.setStorageSync('userInfo', res.data)
				this.userInfo = uni.getStorageSync('userInfo')
				this.showLoginModal = false
				uni.showToast({
					title: '登录成功'
				})
				this.form = {
					username: '',
					password: ''
				}
			} catch (error) {
				uni.showToast({
					title: error.message || '登录失败',
					icon: 'none'
				})
			}
		},

		// 处理注册
		async handleRegister() {
			if (!this.form.username || !this.form.password) {
				uni.showToast({
					title: '请输入完整信息',
					icon: 'none'
				})
				return
			}

			try {
				await register(this.form)
				uni.showToast({
					title: '注册成功，请登录'
				})
				this.handleLogin()
			} catch (error) {
				uni.showToast({
					title: error.message || '注册失败',
					icon: 'none'
				})
			}
		},

		// 退出登录
		handleLogout() {
			uni.showModal({
				title: '确认退出',
				content: '是否确认退出当前账号？',
				success: (res) => {
					if (res.confirm) {
						this.isLogin = false;
						this.userInfo = {};
						uni.removeStorageSync('userInfo');
						uni.showToast({
							title: '已退出登录'
						});
					}
				}
			})
		},
		//获取课程数
		async getCourseCount() {
			getTeacherCourse({ teacherId: this.userInfo.userId, role: this.userInfo.role }).then(res => {
				this.coursecount = res.data.length
			})
		},
		// 修改头像
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					this.userInfo.avatar = res.tempFilePaths[0]
					const changeData = {
						avatar: this.userInfo.avatar,
						userId: this.userInfo.userId
					}
					changeuserinfo(changeData).then(res => {
						console.log(res)
					})
					uni.setStorageSync('userInfo', this.userInfo)
				}
			})
		},

		// 页面跳转方法
		openWallet() {
			uni.navigateTo({
				url: '/pages/wallet/wallet'
			})
		},
		openCollections() {
			uni.navigateTo({
				url: '/pages/collections/collections'
			})
		},
		openCards() {
			uni.navigateTo({
				url: '/pages/cards/cards'
			})
		},
		openSettings() {
			uni.navigateTo({
				url: '/pages/settings/settings'
			})
		},
		changePassword() {
			uni.navigateTo({
				url: '/pages/password/password'
			})
		},
		selectCourse() {
			uni.navigateTo({
				url: '/pages/course/course'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f0f0f0;
	min-height: 100vh;
	padding: 20rpx;
}

/* 头部样式 */
.header {
	background: linear-gradient(135deg, #1296db, #85d7ff);
	border-radius: 20rpx;
	margin-bottom: 30rpx;

	.avatar-section {
		display: flex;
		align-items: center;
		padding: 40rpx;
		color: white;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.5);
		}

		.info {
			flex: 1;
			margin-left: 30rpx;

			.nickname {
				font-size: 36rpx;
				font-weight: bold;
				display: block;
				margin-bottom: 10rpx;
			}

			.desc {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.9);
			}
		}

		.arrow {
			width: 40rpx;
			height: 40rpx;
			opacity: 0.8;
		}
	}

	.not-login {
		display: flex;
		align-items: center;
		padding: 40rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.login-btn {
			background: transparent;
			color: white;
			font-size: 36rpx;
			padding: 15rpx 40rpx;
			border: 2rpx solid white;
			border-radius: 50rpx;
		}
	}
}

/* 登录弹窗样式 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;

	.modal-content {
		width: 600rpx;
		background: white;
		border-radius: 20rpx;
		padding: 40rpx;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.close-icon {
				width: 40rpx;
				height: 40rpx;
				padding: 10rpx;
			}
		}

		.input {
			height: 80rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
		}

		.btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			margin-top: 20rpx;

			&.login {
				background: #1296db;
				color: white;
			}

			&.register {
				background: #f0f0f0;
				color: #333;
			}
		}
	}
}

/* 功能列表 */
.function-list {
	background: white;
	border-radius: 20rpx;
	margin-bottom: 30rpx;

	.list-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.label {
			font-size: 32rpx;
			color: #333;
			flex: 1;
		}

		.count {
			color: #ff4444;
			font-size: 28rpx;
			margin-right: 20rpx;
		}

		.arrow {
			width: 30rpx;
			height: 30rpx;
			opacity: 0.5;
		}
	}
}

/* 快捷入口 */
.quick-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	margin-bottom: 30rpx;

	.link-item {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 20rpx;
		}

		.label {
			font-size: 28rpx;
			color: #666;
		}
	}
}

/* 退出按钮 */
.bottom-actions {
	padding: 0 30rpx;

	.action-btn {
		background: #ff4444;
		color: white;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
	}
}
</style>